<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon" href="/static/assets/images/favicon_1.ico">

    <title>卡友汇后台</title>
    
	<!-- jQuery  -->
	<script src="/static/plugins/jquery-3/jquery.min.js"></script>
	
	<!-- font -->
	<link href="/static/plugins/bootstrap-fileinput/font/v5.5/all.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-4/extensions/popper.min.js"></script>

    <!--bootstrap-->
    <link href="/static/plugins/bootstrap-4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-4/js/bootstrap.min.js"></script>
  
    <!--bootstrap-table-->
    <link href="/static/plugins/bootstrap-table-4/bootstrap-table.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-table-4/bootstrap-table.js"></script>
	<script src="/static/plugins/bootstrap-table-4/locale/bootstrap-table-zh-CN.min.js"></script>

	<!--bootstrap-editable-->
    <link href="/static/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/x-editable/dist//bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script src="/static/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
	
    <!--bootstrap-table-sticky-header-->
    <link href="/static/plugins/bootstrap-table-4/extensions/sticky-header/bootstrap-table-sticky-header.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-table-4/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
	
    <!--bootstrap-table-export-->
	<script src="/static/plugins/tableExport/tableExport.min.js"></script>
	<script src="/static/plugins/tableExport/FileSaver.min.js"></script>
	<script src="/static/plugins/tableExport/xlsx.core.min.js"></script>
	<script src="/static/plugins/tableExport/jspdf.min.js"></script>
	<script src="/static/plugins/tableExport/jspdf.plugin.autotable.js"></script>
	<script src="/static/plugins/bootstrap-table-4/extensions/export/bootstrap-table-export.min.js"></script>

	<!-- kindeditor -->
	<script type="text/javascript" src="/static/plugins/kindeditor/kindeditor-all.js"></script>
	<script type="text/javascript" src="/static/plugins/kindeditor/lang/zh-CN.js"></script>
    
    <!-- jquery icheck-->
    <link href="/static/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css">
    <link href="/static/plugins/icheck/skins/square/blue.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/icheck/js/icheck.min.js"></script>
	
	<!-- qiniu -->
	<script src="/static/assets/qiniu/plupload.full.min.js"></script>
	<script src="/static/assets/qiniu/qiniu.min.js"></script>
	<script src="/static/assets/qiniu/uploadWithSDK.js"></script>

	<!--bootstrap-fileinput-->
    <link href="/static/plugins/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" type="text/css"/>
    <link href="/static/plugins/bootstrap-fileinput/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/static/plugins/bootstrap-fileinput/font/v5.5/all.css" crossorigin="anonymous" rel="stylesheet">
	<script src="/static/plugins/bootstrap-fileinput/js/plugins/piexif.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
	
    <!--bootstrap-validator-->
    <link href="/static/plugins/bootstrap-validator/bootstrap-validator.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-validator/bootstrap-validator.min.js"></script>
	
	<!-- sweet alert  -->
    <link href="/static/plugins/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
	<!-- <script src="/static/plugins/sweetalert/sweetalert.min.js"></script> -->
	<script src="/static/plugins/sweetalert/sweetalert.min.js"></script>
	
	<!--bootstrap-treeview-->
    <link href="/static/plugins/bootstrap-treeview/css/bootstrap-treeview.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-treeview/js/bootstrap-treeview.min.js"></script>
	
	<!--bootstrap-switch-->
    <link href="/static/plugins/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	
    <!--bootstrap-datetimepicker-->
	<script src="/static/plugins/moment/moment.js"></script>
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>

	<!-- bo -->
    <link href="/static/plugins/bo/bo.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bo/bo.js"></script>

</head>


<body>


<div class="container-fluid" id="id_container_">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<table class="bo-table text-nowrap table-layout:fixed" id="xxx_table" 
						  data-width='100%'
						  data-locale='zh-CN'
						  data-toolbar="#toolbar">
  					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- End Row -->
</div>
<!-- container -->
<script>

	$(document).ready(function () {
		var param = {
				field : '[(${field})]'
			};
	    $("#xxx_table").bootstrapTable({
			url: '[[${urlSearch}]]',  //请求地址
	        method: "post",
	        dataType: "json",
	        contentType: "application/x-www-form-urlencoded",
			striped : true, //是否显示行间隔色
			pageNumber : 1, //初始化加载第一页
			pagination : true,//是否分页
			sidePagination : 'server',//server:服务器端分页|client：前端分页
			pageSize : 999,//单页记录数
			pageList : [ 999, 9999],//可选择单页记录数
			queryParamsType: '',
			queryParams: function queryParams(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
	            param.size = params.pageSize;
	            param.page = (params.pageNumber - 1) * params.pageSize;
	            return param;
	        },
			showRefresh : false,//刷新按钮
			columns : [{
				title: '值',
				field: 'dictValue',
				align: 'center',
				valign: 'middle'
			}, {
				title: '操作',
				field: 'dictKey',
				align: 'center',
				valign: 'middle',
				formatter: function(value, row, index) {
					return '<button class="btn btn-primary" onclick="selectOn(\'[[${objId}]]\', \'' + row.dictKey + '\', \'' + row.dictValue + '\')">确定选中</button>';
				}
			}]
	  })
	})
	
	function selectOn(objId, dictKey, dictValue) {
		var objInput = $(window.parent.document).find('#' + objId);
		
		var objSpan = objInput.next();
		
		objInput.val(dictKey);
		objSpan.val(dictValue);
		window.parent.hidePageUrl();
	}
</script>

</body>
</html>